import React, { useEffect, useState } from "react";
import * as echarts from "echarts";

const RadrBar: React.FC<any> = ({ RadrBarData }) => {
  let [RadrBar_chart] = useState<echarts.ECharts>();

  //   useEffect(()=>{
  //     console.log(RadrBarData);

  //       },[RadrBarData])
  useEffect(() => {
    RadrBar_chart = echarts.init(
      document.getElementById("RadrBar_chart") as HTMLElement
    );

    // 构建option配置对象
    const options = {
      // 雷达图  坐标系位置
      radar: {
        axisName: {
          color: "#05D5FF",
          fontSize: 14,
        },
        shape: "polygon",
        center: ["50%", "50%"],
        radius: "80%",
        startAngle: 120,
        axisLine: {
          lineStyle: {
            color: "rgba(5,213,255,0.8)",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "rgba(5,213,255,0.8)",
          },
        },
        indicator: RadrBarData.risks.map(
          (item: { name: string; max: number }) => ({
            name: item.name,
            max: 100,
          })
        ),
        splitArea: {
          show: false,
        },
      },
      // 坐标极点
      polar: {
        center: ["50%", "50%"],
        radius: "0%",
      },
      // 坐标角度
      angleAxis: {
        min: 0,
        interval: 5,
        clockwise: false,
      },
      // 径向轴
      radiusAxis: {
        min: 0,
        interval: 20,
        splitLine: {
          show: true,
        },
      },
      // 核心配置
      series: {
        type: "radar",
        symbol: "circle",
        symbolSize: 10,
        itemStyle: {
          color: "#05D5FF",
        },
        areaStyle: {
          color: "#05D5FF",
          opacity: 0.5,
        },
        lineStyle: {
          width: 2,
          color: "#05D5FF",
        },
        label: {
          show: true,
          color: "#fff",
        },
        data: [
          {
            value: RadrBarData.risks.map((item: { value: any }) => item.value),
          },
        ],
      },
    };

    RadrBar_chart.setOption(options);
  }, [RadrBarData]);

  return (
    <div className="w-full h-full">
      <div>【云端报警风险】</div>
      <div id="RadrBar_chart" className="w-full h-full"></div>
    </div>
  );
};
export default RadrBar;
